<template>
  <!-- 整体背景 -->
  <view class="w-full min-h-screen pb-[40rpx]" style="background: linear-gradient(135deg, #D1FAE5 0%, #ECFDF5 50%, #D1FAE5 100%);">
    
    <!-- 电子健康码卡片 -->
    <view v-if="isHuaSheng" class="px-[30rpx] pt-[40rpx] pb-[30rpx]">
      <view class="rounded-[32rpx] overflow-hidden shadow-2xl" style="background: linear-gradient(135deg, #10B981 0%, #059669 100%);">
        <!-- 卡片头部 -->
        <view class="px-[40rpx] pt-[50rpx] pb-[30rpx]">
          <view class="flex items-center justify-center mb-[40rpx]">
            <text class="text-[48rpx] font-bold text-white">{{ '电子健康码' }}</text>
          </view>
          
          <!-- 用户信息区域 -->
          <view class="flex items-center mb-[40rpx] bg-white/20 rounded-[24rpx] p-[30rpx] backdrop-blur-sm">
            <!-- 头像 -->
            <view class="relative mr-[24rpx]">
              <view class="w-[120rpx] h-[120rpx] rounded-full flex items-center justify-center border-4 border-white/60" style="background: rgba(255, 255, 255, 0.3);">
                <image 
                  class="w-[100rpx] h-[100rpx] rounded-full bg-white/80" 
                  mode="aspectFill" 
                  :src="useImage(displayAvatar)" 
                />
              </view>
            </view>
            
            <!-- 用户信息 -->
            <view class="flex-1">
              <view class="mb-[16rpx]">
                <text class="text-[24rpx] text-white/90 font-medium">姓名</text>
                <text class="text-[32rpx] text-white font-bold ml-[12rpx]">{{ user.name }}</text>
              </view>
              <view class="mb-[16rpx]">
                <text class="text-[24rpx] text-white/90 font-medium">身份证号</text>
                <text class="text-[28rpx] text-white ml-[12rpx]">{{ user.idcard }}</text>
              </view>
              <view>
                <text class="text-[24rpx] text-white/90 font-medium">Anfine ID</text>
                <text class="text-[28rpx] text-white ml-[12rpx]">{{ user.anfineid || '暂无' }}</text>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 二维码区域 -->
        <view class="px-[40rpx] pb-[50rpx]">
          <view class="w-full bg-white rounded-[24rpx] p-[30rpx] shadow-lg">
            <view class="w-full aspect-square max-w-[500rpx] mx-auto flex items-center justify-center">
              <CodeImg :code="code" v-if="code" />
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 安好诊疗卡 -->
    <!-- <HCard v-else :user="user" /> -->
    
    <!-- 诊疗卡/健康卡 -->
    <view class="px-[30rpx] pt-[30rpx] pb-[40rpx]">
      <view class="rounded-[32rpx] overflow-hidden shadow-2xl bg-white">
        <!-- 卡片头部 -->
        <view class="px-[40rpx] pt-[50rpx] pb-[30rpx]" style="background: linear-gradient(135deg, #10B981 0%, #059669 100%);">
          <view class="flex items-center justify-center mb-[40rpx]">
            <text class="text-[48rpx] font-bold text-white">{{ isHuaSheng ? '电子健康卡' : '诊疗卡' }}</text>
          </view>
          
          <!-- 用户信息区域 -->
          <view class="flex items-center bg-white/20 rounded-[24rpx] p-[30rpx] backdrop-blur-sm">
            <!-- 头像 -->
            <view class="relative mr-[24rpx]">
              <view class="w-[120rpx] h-[120rpx] rounded-full flex items-center justify-center border-4 border-white/60" style="background: rgba(255, 255, 255, 0.3);">
                <image 
                  class="w-[100rpx] h-[100rpx] rounded-full bg-white/80" 
                  mode="aspectFill" 
                  :src="useImage(displayAvatar)" 
                />
              </view>
            </view>
            
            <!-- 用户信息 -->
            <view class="flex-1">
              <view class="mb-[16rpx]">
                <text class="text-[24rpx] text-white/90 font-medium">姓名</text>
                <text class="text-[32rpx] text-white font-bold ml-[12rpx]">{{ user.name }}</text>
              </view>
              <view class="mb-[16rpx]">
                <text class="text-[24rpx] text-white/90 font-medium">身份证号</text>
                <text class="text-[28rpx] text-white ml-[12rpx]">{{ user.idcard }}</text>
              </view>
              <view>
                <text class="text-[24rpx] text-white/90 font-medium">Anfine ID</text>
                <text class="text-[28rpx] text-white ml-[12rpx]">{{ user.anfineid || '暂无' }}</text>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 卡片图片区域 -->
        <view class="px-[40rpx] py-[50rpx]">
          <view class="w-full bg-gradient-to-br from-[#f0fdf4] to-[#dcfce7] box-border rounded-[24rpx] p-[30rpx] border-2 border-[#86efac]/50">
            <view class="w-full aspect-square max-w-[500rpx] mx-auto bg-white rounded-[20rpx] flex items-center justify-center shadow-inner">
              <image 
                v-if="user.healthpic" 
                :src="user.healthpic" 
                mode="aspectFit" 
                class="w-full h-full rounded-[20rpx]"
              />
              <view v-else class="text-[28rpx] text-gray-400">暂无图片</view>
            </view>
          </view>
        </view>
        
        <!-- 提示信息 -->
        <view class="px-[40rpx] pb-[40rpx]">
          <view class="bg-gradient-to-r from-[#d1fae5] to-[#a7f3d0] border-l-4 border-[#10B981] p-[30rpx] rounded-r-[16rpx]">
            <text class="text-[28rpx] text-[#047857] leading-relaxed">
              {{ isHuaSheng ? '电子健康卡可在全国医疗机构使用，实现跨机构、跨区域就医一卡通。' : '诊疗卡可在全国医疗机构使用，实现跨机构、跨区域就医一卡通。' }}
            </text>
          </view>
        </view>
        
        <!-- 重新申请按钮 -->
        <view v-if="self" class="px-[40rpx] pb-[50rpx]">
          <view class="text-center">
            <text class="text-[26rpx] text-gray-600">可以点击这里 </text>
            <text 
              class="text-[26rpx] text-[#10B981] underline font-medium cursor-pointer active:opacity-70" 
              @click="$emit('reapply')"
            >
              重新申请
            </text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import CodeImg from './code-img.vue'
// import HCard from './hcard.vue'
import { localStg } from '@/utils';
import { onMounted, ref, computed } from 'vue';
import { useImage } from '@/hooks';
import { useAuthStore } from '@/store';
import { storeToRefs } from 'pinia';
import ren from '@/assets/img/ren.png';

const props = defineProps<{
  code: string
  user: {
    name: string
    idcard: string
    phone: string
    healthpic: string
    avatar?: string
    anfineid?: string
  }
  isHuaSheng: boolean
}>()

const { nurseUser } = storeToRefs(useAuthStore());
const self = ref(false)

// 计算显示的头像：如果是自己，使用当前用户头像，否则使用传入的user.avatar
const displayAvatar = computed(() => {
  if (self.value) {
    return nurseUser.value?.avatar || ren;
  }
  return props.user.avatar || ren;
})

onMounted(() => {
  const curFamily = localStg.get('curFamily' as any) as any;
  if(curFamily){
    self.value = curFamily.relation == '1'
  }
  else{
    self.value = true
  }
  console.log(curFamily, "curFamily-----")
})
</script>